{% extends 'base.html' %}
{% load static %}
{% block title %}留言{% endblock %}
{% block header_file %}
    <link rel="stylesheet" href="{% static 'css/message.min.css' %}"/>
{% endblock %}
{% block base_content %}
    <div class="container-inner">
        <section class="msg-remark">
            <h1>留言板</h1>
            <p>沟通交流，拉近你我！</p>
        </section>
        <div class="textarea-wrap message" id="textarea-wrap">
            <form class="layui-form blog-editor" action="">
                {% csrf_token %}
                <div class="layui-form-item">
                <textarea
                        name="content"
                        lay-verify="content"
                        id="remarkEditor"
                        placeholder="请输入内容"
                        class="layui-textarea layui-hide"
                ></textarea>
                </div>
                <div class="layui-form-item">
                    <button
                            class="layui-btn layui-btn-sm"
                            lay-submit
                            lay-filter="*"
                    >
                        提交留言
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="f-cb"></div>
    <div class="mt20">
        <ul class="message-list" id="message-list">
            {% for message in messages %}
                <li class="zoomIn article">
                    <div class="comment-parent">
                        <img src="{{ message.user.avatar }}"/>
                        <div class="info">
                            <span class="username">{{ message.user.username }}</span>
                        </div>
                        <div class="comment-content">{{ message.content|safe }}</div>
                        <p class="info info-footer">
                            <span class="comment-time">{{ message.time }}</span>
                        </p>
                    </div>
                    {% for reply in message.reply %}
                        <hr/>
                        <div class="comment-child">
                            <img src="{{ reply.user.avatar }}"/>
                            <div class="info">
                                <span class="username">{{ reply.user.username }}</span>
                                <span class="blogger">博主</span>
                                <span style="padding-right: 0; margin-left: -5px">回复</span>
                            </div>
                            <div class="comment-content">{{ reply.content|safe }}</div>
                            <p class="info">
                                <span class="comment-time">{{ reply.time }}</span>
                            </p>
                        </div>
                    {% endfor %}
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}
{% block footer_file %}
    <script src="{% static 'js/message.min.js' %}"></script>
{% endblock %}